<template>
  <div>
    <Row class="banner">
      <h1>隐患历史记录</h1>
      <h2>对所有的隐患历史数据进行记录和维护</h2>
    </Row>
    <div class="section">
      <Row :gutter="16" type="flex" justify="start" class="row">
        <Col span="8">
          <Card shadow>
            <p slot="title">
              <span>近七日隐患变化情况</span>
            </p>
            <div class="chart" id="chart-danger-wave"></div>
            <Divider />
            <span class="text">今日产生隐患单位数：{{dangerCountToday}}</span>
            <Spin v-if="loading.dangerWave" fix size="large"></Spin>
          </Card>
        </Col>
        <Col span="8">
          <Card shadow>
            <p slot="title">
              <span>近七日巡查变化情况</span>
            </p>
            <div class="chart" id="chart-patrol-wave"></div>
            <Divider />
            <span class="text">今日巡查完成单位数：{{patrolCountToday}}</span>
            <Spin v-if="loading.patrolWave" fix size="large"></Spin>
          </Card>
        </Col>
        <Col span="8">
          <Card shadow>
            <p slot="title">
              <span>近七日隐患解决情况</span>
            </p>
            <div class="chart" id="chart-resolve-wave"></div>
            <Divider />
            <span class="text">今日解决隐患单位数：{{resolveCountToday}}</span>
            <Spin v-if="loading.resolveWave" fix size="large"></Spin>
          </Card>
        </Col>
      </Row>
      <Row :gutter="16" type="flex" class="row">
        <Col span="24">
          <Card>
            <p slot="title">
              <span>隐患历史记录</span>
            </p>
            <ul class="toolbar" slot="extra">
              <li class="item">
                <span class="text">按时间段筛选</span>
                <DatePicker
                  type="datetimerange"
                  placement="bottom-end"
                  placeholder="点击选择起止时间"
                  style="width: 300px"
                  size="default"
                  @on-change="handleSelectDate"
                ></DatePicker>
              </li>
              <li class="item">
                <span class="text">按区划筛选</span>
                <Select v-model="districtName" style="width:200px" size="default">
                  <Option
                    v-for="(item,index) in districtList"
                    :value="item"
                    :key="'dn-'+index"
                  >{{ item }}</Option>
                </Select>
              </li>
              <li class="item">
                <span class="text">按类型筛选</span>
                <Select v-model="typeName" style="width:200px" size="default">
                  <Option
                    v-for="(item,index) in typeList"
                    :value="item"
                    :key="'tn-'+index"
                  >{{ item }}</Option>
                </Select>
              </li>
              <li class="item">
                <Input
                  v-model="keyword"
                  placeholder="请输入部位名称开始搜索"
                  style="width:260px"
                  :search="true"
                  enter-button="立即搜索"
                  size="default"
                  @on-search="renderTable(0)"
                />
              </li>
            </ul>
            <Table :columns="tableColumns" :data="tableData"></Table>
            <Divider />
            <Page :total="pageCount" show-elevator @on-change="renderTable"></Page>
            <Spin v-if="loading.table" fix size="large"></Spin>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      option: {
        patrolWave: null,
        resolveWave: null,
        dangerWave: null
      },
      loading: {
        patrolWave: false,
        resolveWave: false,
        dangerWave: false,
        table: false
      },
      tableData: [],
      tableColumns: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title: "隐患内容",
          key: "QText",
          align: "center"
        },
        {
          title: "隐患类型",
          key: "AlarmType",
          align: "center"
        },
        {
          title: "发生部位",
          key: "comName",
          align: "center"
        },
        {
          title: "发现时间",
          key: "AlarmTime",
          align: "center"
        },
        {
          title: "所在区划",
          key: "DistrictName",
          align: "center"
        },
        {
          title: "负责人",
          key: "ChargerName",
          align: "center"
        },
        {
          title: "联系电话",
          key: "Phone",
          align: "center"
        }
      ],
      districtList:['云岩区','南明区','观山湖区','白云区','乌当区','花溪区','经开区','清镇市','修文县','息烽县','开阳县'],
      typeList:['电压不足','喷淋系统水压不足','水箱水位低','电流异常','室内消火栓水位低','电路温度','其他隐患'],
      districtName:null,
      typeName:null,
      keyword:null,
      pageCount:0,
      startTime: null,
      endTime: null,
      dangerCountToday:0,
      resolveCountToday:0,
      patrolCountToday:0
    };
  },
  methods: {
    renderChart_PatrolWave() {
      this.loading.patrolWave = true;
      let params = {
        startTime: this.dateShift(-6) + " 23:59:59",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      this.option.patrolWave = {
        grid: { top: 10, left: 10, right: 10, bottom: 10, containLabel: true },
        tooltip: { show: true, trigger: "shadow", formatter: "{b}:{c}" },
        xAxis: {
          type: "category",boundaryGap:false,
          data: [],
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } ,interval:0,rotate:30},
          splitLine: { show: true, lineStyle: { color: "#33333320" } },
          splitArea: { show: true, areaStyle: { color: "#33333305" } }
        },
        yAxis: {
          type: "value",
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } },
          splitLine: { show: true, lineStyle: { color: "#33333320" } },
          splitArea: { show: true, areaStyle: { color: "#33333302" } }
        },
        series: [
          {
            type: "line",
            data: [],
            lineStyle: {
              color: "#2d8cf0",
              width: 3,
              shadowOffsetX: 0,
              shadowOffsetY: 6,
              shadowBlur: 12,
              shadowColor: "#2d8cf050"
            },
            areaStyle: { show: true, color: "#2d8cf075" },
            label: { show: true, position: "top", fontSize: 12 }
          }
        ]
      };
      axios
        .get(this.URLHEAD_DVS + "getDangerPatrolSpread", { params: params })
        .then(res => {
          let json = res.data;
          this.option.patrolWave.xAxis.data = json.Data.list.map(o => {
            return o.time;
          });
          this.option.patrolWave.series[0].data = json.Data.list.map(o => {
            return { name: o.time, value: o.xcs };
          });
          this.patrolCountToday = json.Data.list[6].xcs
          this.$Crender("chart-patrol-wave", this.option.patrolWave);
          this.loading.patrolWave = false;
        });
    },
    renderChart_ResolveWave() {
        this.loading.resolveWave = true;
      let params = {
        startTime: this.dateShift(-6) + " 23:59:59",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      this.option.resolveWave = {
        grid: { top: 10, left: 10, right: 10, bottom: 10, containLabel: true },
        tooltip: { show: true, trigger: "shadow", formatter: "{b}:{c}" },
        xAxis: {
          type: "category",boundaryGap:false,
          data: [],
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } ,interval:0,rotate:30 },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333305" } }
        },
        yAxis: {
          type: "value",
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333303" } }
        },
        series: [
          {
            type: "line",
            data: [],
            lineStyle: {
              color: "#19be6b",
              width: 3,
              shadowOffsetX: 0,
              shadowOffsetY: 6,
              shadowBlur: 12,
              shadowColor: "#19be6b50"
            },
            areaStyle: { show: true, color: "#19be6b75" },
            label: { show: true, position: "top", fontSize: 12 }
          }
        ]
      };
      axios
        .get(this.URLHEAD_DVS + "getDangerTimeSpread", { params: params })
        .then(res => {
          let json = res.data;
          this.option.resolveWave.xAxis.data = json.Data.list.map(o => {
            return o.name;
          });
          this.option.resolveWave.series[0].data = json.Data.list.map(o => {
            return { name: o.name, value: o.value2 };
          });
          this.resolveCountToday = json.Data.list[6].value2
          this.$Crender("chart-resolve-wave", this.option.resolveWave);
          this.loading.resolveWave = false;
        });
    },
    renderChart_DangerWave() {
      this.loading.dangerWave = true;
      let params = {
        startTime: this.dateShift(-6) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      this.option.dangerWave = {
        grid: { top: 10, left: 10, right: 10, bottom: 10, containLabel: true },
        tooltip: { show: true, trigger: "shadow", formatter: "{b}:{c}" },
        xAxis: {
          type: "category",boundaryGap:false,
          data: [],
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" },interval:0,rotate:30 },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333305" } }
        },
        yAxis: {
          type: "value",
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333302" } }
        },
        series: [
          {
            type: "line",
            data: [],
            lineStyle: {
              color: "#ff2200",
              width: 3,
              shadowOffsetX: 0,
              shadowOffsetY: 6,
              shadowBlur: 12,
              shadowColor: "#ff220050"
            },
            areaStyle: { show: true, color: "#ff220075" },
            label: { show: true, position: "top", fontSize: 12 }
          }
        ]
      };
      axios
        .get(this.URLHEAD_DVS + "getDangerTimeSpread", { params: params })
        .then(res => {
          let json = res.data;
          this.option.dangerWave.xAxis.data = json.Data.list.map(o => {
            return o.name;
          });
          this.option.dangerWave.series[0].data = json.Data.list.map(o => {
            return { name: o.name, value: o.value };
          });
          this.dangerCountToday = json.Data.list[6].value
          this.$Crender("chart-danger-wave", this.option.dangerWave);
          this.loading.dangerWave = false;
        });
    },
    handleSelectDate(daterange) {
        this.startTime = daterange[0]
        this.endTime = daterange[1]
    },
    renderTable(index) {
        this.loading.table = true;
        let params = {
            pageIndex:index,
            pageSize:10,
            type:this.typeName,
            country:this.districtName,
            startTime:this.startTime,
            endTime:this.endTime
        }
        axios.get(this.URLHEAD_TA + 'QueryProblems',{params:params}).then(res=>{
            let json = res.data;
            this.pageCount = json.count;
            this.tableData = json.Data.map((o,i)=>{
                return {
                    index:i+1,
                    QText:o.QTexts === null?'暂无信息':o.QTexts,
                    AlarmType:o.dangerType === ''?'暂无信息':o.dangerType,
                    comName:o.MC === ''?'暂无信息':o.MC,
                    AlarmTime:o.AlarmTime === ''?'暂无信息':o.AlarmTime,
                    DistrictName:o.FireDeptMC === ''?'暂无信息':o.FireDeptMC,
                    ChargerName:o.FireDuty === ''?'暂无信息':o.FireDuty,
                    Phone:o.FireDutyTel === ''?'暂无信息':o.FireDutyTel
                }
            })
            this.loading.table = false
        })
    }
  },
  created(){
    
  },
  mounted(){
    this.renderChart_ResolveWave()
    this.renderChart_PatrolWave()
    this.renderChart_DangerWave()
    this.renderTable(0)
  }
};
</script>

<style lang="" scoped>
.chart{
  height:350px;
}

</style>